<template>
    <Dialog title="添加收货地址" v-model:visible="dialogVisible">
        <div class="address-edit">
            <div class="form">
                <div class="form-item">
                    <div class="label">收货人：</div>
                    <div class="field">
                        <input class="input" placeholder="请输入收货人" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">手机号：</div>
                    <div class="field">
                        <input class="input" placeholder="请输入手机号" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">地区：</div>
                    <div class="field">
                        <XtxCity placeholder="请选择所在地区" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">详细地址：</div>
                    <div class="field">
                        <input class="input" placeholder="请输入详细地址" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">邮政编码：</div>
                    <div class="field">
                        <input class="input" placeholder="请输入邮政编码" />
                    </div>
                </div>
                <div class="form-item">
                    <div class="label">地址标签：</div>
                    <div class="field">
                        <input class="input" placeholder="请输入地址标签，逗号分隔" />
                    </div>
                </div>
            </div>
        </div>
        <template v-slot:footer>
            <Button type="gray" style="margin-right:20px">取消</Button>
            <Button type="primary">确认</Button>
        </template>
    </Dialog>
</template>
  <script setup>
import { ref, reactive } from 'vue'
const dialogVisible = ref(false)
// 打开函数
const open = () => {
    dialogVisible.value = true
}

// 表单数据
const formData = reactive({
    receiver: '',
    contact: '',
    provinceCode: '',
    cityCode: '',
    countyCode: '',
    address: '',
    postalCode: '',
    addressTags: '',
    isDefault: 0,
    fullLocation: ''
})
</script>
  <style scoped lang="scss">
  .address-edit {
      .dialog {
          :deep(.wrapper) {
              width: 780px;
  
              .body {
                  font-size: 14px;
              }
          }
      }
  
      .form {
          padding: 0;
  
          input {
              outline: none;
  
              &::placeholder {
                  color: #ccc;
              }
          }
      }
  
      .city {
          width: 320px;
  
          :deep(.select) {
              height: 50px;
              line-height: 48px;
              display: flex;
              padding: 0 10px;
              justify-content: space-between;
  
              .placeholder {
                  color: #ccc;
              }
  
              i {
                  color: #ccc;
                  font-size: 18px;
              }
  
              .value {
                  font-size: 14px;
              }
          }
  
          :deep(.option) {
              top: 49px;
          }
      }
  }
  </style>